<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			.imgarr {
				position: fixed;
				bottom: 100px;
				right: 50px;
				cursor: pointer;
				display: none;
				box-shadow: 0px 0px 5px 0px gray;
			}
			
			div {
				width: 100%;
				margin: 0px auto;
				text-align: center;
				color: red;
			}
			
			div img {
				width: 100%;
				height: 2000px;
			}
		</style>

	</head>

	<body>
		<img id="imgarr" class="imgarr" src="img/Top.jpg" />
		<div>
			<img src="img/mi.jpg" class="box" />
		</div>

		<script src="animate.js"></script>
		<script>
			window.onload = function() {
				//需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
				//难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。
				//      技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标

				var imgarr = document.getElementById("imgarr");
				window.onscroll = function() {
					//被卷去的距离大于200显示小火箭，否则隐藏
					//2.显示隐藏小火箭
					if(scroll().top > 100) {
						imgarr.style.display = "block";
					} else {
						imgarr.style.display = "none";
					}
					//每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
					leader = scroll().top;
				}
				//3.缓动跳转到页面最顶端（利用我们的缓动动画）
				var timer = null;
				var target = 0; //目标位置
				var leader = 0; //显示区域自身的位置
				imgarr.onclick = function() {
					//技术点：window.scrollTo(0,0);
					//要用定时器，先清定时器
					clearInterval(timer);
					timer = setInterval(function() {
						//获取步长
						var step = (target - leader) / 10;
						//二次处理步长
						step = step > 0 ? Math.ceil(step) : Math.floor(step);
						leader = leader + step;
						//显示区域移动
						window.scrollTo(0, leader);
						//清除定时器
						if(leader === 0) {
							clearInterval(timer);
						}
					}, 25);
				}
			}
		</script>
	</body>

</html>